import QtQuick

BorderImage {
    id: root2
    width: 600
    height: 300
    source: "qrc:/images/frame2.png"
    
    // 九宫格边界配置（单位：像素）
    border {
        left: 40    // 左侧保留区域
        right: 40   // 右侧保留区域
        top: 40     // 顶部保留区域
        bottom: 40  // 底部保留区域
    }
    
    // 平铺模式配置
    horizontalTileMode: BorderImage.Stretch  // 水平拉伸中间区域
    verticalTileMode: BorderImage.Stretch    // 垂直拉伸中间区域
    
    // 九宫格辅助线
    Repeater {
        model: [
            {x: border.left, color: "gray", vertical: true},
            {x: root2.width - border.right, color: "gray", vertical: true},
            {y: border.top, color: "gray", vertical: false},
            {y: root2.height - border.bottom, color: "gray", vertical: false}
        ]
        
        delegate: Rectangle {
            width: modelData.vertical ? 2 : parent.width
            height: modelData.vertical ? parent.height : 2
            x: modelData.vertical ? modelData.x : 0
            y: modelData.vertical ? 0 : modelData.y
            color: "transparent"
            
            Canvas {
                anchors.fill: parent
                onPaint: {
                    var ctx = getContext("2d")
                    ctx.strokeStyle = modelData.color
                    ctx.lineWidth = 2
                    ctx.setLineDash([4, 4]) // 4像素实线 + 4像素空白
                    ctx.beginPath()
                    
                    if (modelData.vertical) {
                        ctx.moveTo(0, 0)
                        ctx.lineTo(0, height)
                    } else {
                        ctx.moveTo(0, 0)
                        ctx.lineTo(width, 0)
                    }
                    
                    ctx.stroke()
                }
            }
            
            opacity: 0.8
            visible: true
        }
    }
}
